<template>
  <div id="app" style="">
    <header-box v-show="$store.state.isHShow"></header-box>
    <transition :name="transitionName" v-if="$route.meta.keepAlive">
      <keep-alive>
        <router-view class="Router" style="padding: .44rem 0 .52rem 0;" v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName" v-if="!$route.meta.keepAlive">
      <router-view class="Router" style="padding: .44rem 0 .52rem 0;" v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <footer-box v-show="$store.state.isFShow"></footer-box>
  </div>
</template>

<script>
  import headerBox from 'src/components/header';
  import footerBox from 'src/components/footer';
  export default {
    name: 'app',
    components: {
      headerBox,
      footerBox
    },
    data(){
      return{
        transitionName: 'slide-left'
      }
    },
    mounted() {
      if(localStorage.getItem('slide')){
        this.transitionName = JSON.parse(localStorage.getItem('slide'))
      }
    },
    watch: {
      '$route' (to, from) {
        if(to.meta.index > from.meta.index) {
          localStorage.setItem('slide', JSON.stringify('slide-left'));
          this.transitionName = JSON.parse(localStorage.getItem('slide'))
        } else {
          localStorage.setItem('slide', JSON.stringify('slide-right'));
          this.transitionName = JSON.parse(localStorage.getItem('slide'))
        }
      }
    }
  }
</script>

<style lang="scss">
  @import './assets/common/css/reset';
  @import './assets/common/css/common';
  @import './assets/common/css/CSSSkill';

  .Router {
    position: absolute;
    width: 100%;
    transition: all .3s ease-out;
  }

  .slide-left-enter,
  .slide-right-leave-active {
    opacity: 0;
     -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
     -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
  }
</style>
